<template>
  <el-dialog
    title="选择工人"
    :visible="selectWorkerDialog"
    width="700"
    class="Worker-select"
    @close="selectWorkerClose"
  >
    <div class="app-container Worker-box">
      <el-row :gutter="20">
        <el-col :xs="24" :span="7" class="dict-module">
          <div class="dic-t">
            <h3>选择班组</h3>
            <ul v-if="optionsteam.length > 0">
              <li
                v-for="(item, index) in optionsteam"
                :key="index"
                @click="menuSelect(item, index)"
                :class="{ active: index == isCurrent }"
              >
                <label></label><span>{{ item.name }}</span>
              </li>
            </ul>
            <ul v-else class="none-data">
              <li>暂无数据</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="17" :xs="24">
          <!-- 工人数据 -->
          <div :style="{ height: maxHeight + 'px' }">
            <div class="el-transfer">
              <div class="el-transfer-panel">
                <p class="el-transfer-panel__header">
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    :disabled="workerData.length == 0"
                    >{{ teamTitle }}</el-checkbox
                  >
                </p>
                <div class="el-transfer-panel__body" v-loading="loading">
                  <div
                    class="el-checkbox-group el-transfer-panel__list"
                    v-if="workerData.length > 0"
                  >
                    <el-checkbox-group
                      v-model="checkedWorker"
                      @change="handleCheckedWorkerChange"
                    >
                      <el-checkbox
                        v-for="item in workerData"
                        :label="item.code"
                        :key="item.code"
                        >{{ item.name }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                  <p class="el-transfer-panel__empty" v-else>无数据</p>
                </div>
              </div>
              <div class="el-transfer__buttons">
                <button
                  type="button"
                  @click="btnTransfer"
                  class="
                    el-button el-button--primary el-button--medium
                    el-transfer__button
                  "
                  :class="{ 'is-disabled': checkedWorker.length == 0 }"
                >
                  <span><i class="el-icon-arrow-right"></i></span>
                </button>
              </div>
              <div class="el-transfer-panel right-tr">
                <p class="el-transfer-panel__header">
                  <label class="el-checkbox" style="padding-top: 10px">
                    <span class="el-checkbox__label"> 已选工人</span></label
                  >
                </p>
                <div class="el-transfer-panel__body">
                  <!---->
                  <div
                    v-if="transferData.length > 0"
                    role="group"
                    aria-label="checkbox-group"
                    class="el-checkbox-group el-transfer-panel__list"
                  >
                    <label
                      class="el-checkbox el-transfer-panel__item"
                      v-for="(item, index) in transferData"
                      :key="index"
                      ><span class="el-checkbox__label"
                        ><span>{{ item.name }} </span>
                        <i
                          class="el-icon-close"
                          @click="delTransfer(index)"
                          style="display: none"
                        ></i> </span
                    ></label>
                  </div>

                  <p class="el-transfer-panel__empty" v-else>无数据</p>
                </div>
                <!---->
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="worker-success">
      <div>
        <el-button
          :disabled="transferData.length == 0"
          type="primary"
          @click="handleWorkerSuccess"
          >确定</el-button
        >
        <el-button @click="selectWorkerClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { listWorker, listTeam } from "../../api/product";
let self;
export default {
  name: "Worker",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        teamCode: "",
        workType:""
      },
      // 总条数
      total: 0,
      // 最大高度
      maxHeight: null,
      //工人数据
      workerData: [],
      //班组
      optionsteam: [],
      //班组名称
      teamTitle: "所有工人",
      //穿梭框右部数据
      transferData: [],
      //选择工人得到编号
      checkedWorker: [],
      //全选
      isIndeterminate: false,
      checkAll: false,
      //选择值
      value: [],
      //确定
      successStatus: true,
      //点击状态
      isCurrent: null,
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",

      //弹框提交按钮状态，1（新增） 2（修改）
      butChange: "",
    };
  },
  props: {
    selectWorkerDialog: {
      type: Boolean,
      default: true,
    },
    workType: {
      type: String,
      default: "",
    },
    workType: {
      type: String,
     default:""
    },
  },
  beforeCreate() {
    self = this;
  },
  created() {
    this.maxHeight = `${document.documentElement.clientHeight}` - 550;
    this.getTeam();
    this.getWorkerlList();
  },
  methods: {
    // 获取工人数据
    getWorkerlList() {
      this.loading = true;
      this.queryParams.workType = this.workType;
      listWorker(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.workerData = res.rows;
          this.checkedWorker = [];
          this.isIndeterminate = false;
          this.checkAll = false;
          this.total = res.total;
          this.loading = false;
        }
      });
    },

    //班组
    getTeam() {
      listTeam({workType:this.workType}).then((res) => {
        if (res.code == 200) {
          this.optionsteam = res.rows;
        }
      });
    },

    //选择班组查询工人
    menuSelect(item, index) {
      this.isCurrent = index;
      this.queryParams.teamCode = item.code;
      if (this.optionsteam.length > 0) {
        this.optionsteam.forEach((value) => {
          if (value.code == item.code) {
            this.teamTitle = value.name;
          }
        });
      }
      this.getWorkerlList();
    },

    // 穿梭框左边工人
    handleCheckedWorkerChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.workerData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.workerData.length;
    },

    //全选
    handleCheckAllChange(val) {
      console.log(val);
      let data = [];
      if (this.workerData.length > 0) {
        this.workerData.forEach((item) => {
          data.push(item.code);
        });
      }
      this.checkedWorker = val ? data : [];
      this.isIndeterminate = false;
    },

    //穿梭
    btnTransfer() {
      this.workerData.forEach((item) => {
        this.checkedWorker.forEach((code) => {
          if (item.code == code) {
            if (this.transferData.indexOf(item) <= -1) {
              this.transferData.push(item);
            }
          }
        });
      });
    },

    //删除已选工人
    delTransfer(index) {
      this.transferData.splice(index, 1);
    },

    // 弹框状态
    selectWorkerClose() {
      this.$emit("selectWorkerClose");
    },

    //确定
    handleWorkerSuccess() {
      let name = "",
        code = "";
      this.transferData.forEach((item) => {
        name = name + "," + item.name;
        code = code + "," + item.code;
      });

      name = name.slice(1);
      code = code.slice(1);
      this.$emit("handleWorkerSuccess", code, name);
    },

    /** 弹框取消 */
    cancel() {
      this.open = false;
      this.reset();
    },
    close() {
      this.reset();
    },
  },
};
</script>
<style lang="scss">
.Worker-select {
  .el-transfer-panel__body {
    height: calc(100vh - 650px);
  }
  .app-container{
    padding-top: 0;
  }
  .el-transfer-panel__list {
     height: calc(100vh - 650px)!important;
  }
  .el-checkbox-group {
    .el-checkbox {
      display: block;
      margin-left: 15px;
      margin-bottom: 10px;
    }
  }
  .right-tr {
    .el-checkbox__label,
    .el-transfer-panel__item {
      padding-left: 0;
    }
    .el-checkbox {
      margin-bottom: 0;
    }
    .el-transfer-panel__item:hover {
      color: #333;
    }
    .el-transfer-panel__item:hover i {
      color: #f11;
      opacity: 0.6;
      display: block !important;
    }
    .el-checkbox__label {
      display: flex;
      align-items: center;
      span {
        width: 60px;
        display: block;
      }
    }
  }

  .worker-success {
    position: absolute;
    bottom: 20px;
    right: 40px;

    button {
      padding: 8px 40px;
    }
  }
  .dict-module {
    .dic-t {
      margin-right: 20px;
      border: 1px solid #eee;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      height: calc(100vh - 610px)!important;
      width: 198px;
    }

    h3 {
      font-size: 15px;
      font-weight: normal;
      border-bottom: 1px solid #eee;
      margin: 0;
      height: 40px;
      padding-left: 15px;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      border-bottom: 1px solid #e6ebf5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #000000;
    }

    ul {
      margin: 0;
      padding: 0;
      margin-left: 15px;
      height: 305px;
      overflow: auto;
    }

    ul li {
      label {
        width: 5px;
        height: 5px;
        display: inline-block;
        background: #ccc;
        vertical-align: middle;
        margin-right: 10px;
      }
      display: flex;
      align-items: center;
      padding: 5px;
      list-style: none;
      cursor: pointer;
      font-size: 14px;
      color: #606266;
      text-align: left;
    }
    // 高亮
    .active {
      color: #1890ff;
      label {
        background: #1890ff;
      }
    }
  }
}
</style>
